<!DOCTYPE html>

<!-- Copyright © SixtyFPS GmbH <info@slint.dev> -->
<!-- SPDX-License-Identifier: MIT -->

<html>
  <head>
    <title>Slint Material 3 Gallery  (Web Assembly version)</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      body {
        background: white;
      }

      canvas {
        width: 100% !important;
        height: 100% !important;
        background: white;
      }

      @media (prefers-color-scheme: dark) {
        body {
          background: #040620;
        }
        canvas {
          background: #040620;
        }
      }

      @media (max-width: 600px), (pointer: coarse) and (hover: none) {
        .canvas-container {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          max-width: 100vw !important;
          height: 100vh !important;
          max-height: 100vh !important;
          aspect-ratio: unset !important;
          transform: none !important;
          margin: 0 !important;
        }
        .canvas-container canvas {
          width: 100vw !important;
          height: 100vh !important;
        }
        .canvas-container img {
          display: none !important;
        }
      }
    </style>
  </head>
  <body>
    <!-- canvas required by the Slint runtime -->
    <div style="width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;">
      <div class="canvas-container" style="position: fixed; top: 50%; left: 50%; width: 80vw; max-width: 1000px; aspect-ratio: 10 / 7; transform: translate(-50%, -50%); margin: 0; overflow: visible; z-index: 0; display: flex; align-items: center; justify-content: center;">
        <canvas id="canvas" style="display: block; width: 100%; height: 100%; background: black;"></canvas>
        <img src="./frame-tablet.webp" alt="Tablet Frame" style="position: absolute; top: -5%; left: -3.8%; width: 107.4%; height: 110%; pointer-events: none; z-index: 1;" />
      </div>
    </div>
    <script type="module">
      import init from "./pkg/gallery_lib.js";
      init();
    </script>
  </body>
</html>
